<template>
  <div class="coursePageBox">
      <!-- <div class="pageBrand">
        <img src="../../static/image/banner-1.png" alt="">
      </div> -->
      <div class="pageContant">
        <!-- 课程详情 -->
        <div class="pageDetail">
          <div class="titleAll ">
            <div class="public-header">
            <div class="public-header-ch">课程详情</div>
            <div class="public-header-en">COURSE&nbsp;&nbsp;DETAILS</div>
            <div class="public-header-line"></div>
          </div>
          <img src="../../static/image/icon-title.png">
        </div>

          <div class="pageTable">
            <!-- 第二版 -->
            <!-- <div class="courseBox">
              <div class="meetingRom"><img src="../../static/image/meeting.png">进入大会议房间</div> -->
              <!-- content -->
              <!-- <div class="course-content">
                <div class="content-left">
                  <h3>课程名称：测试1</h3> -->
                  <!-- statTime -->
                  <!-- <div class="courseTimeBox courseTimeBoxOne">
                    <h4>课程开始时间</h4>
                    <div class="timeLine">
                      <div>2018/1/13(周六)</div>
                      <div>10：30（上午）</div>
                    </div>
                  </div> -->
                  <!-- statTime end-->
                  <!-- endTime -->
                  <!-- <div class="courseTimeBox courseTimeBoxOne">
                    <h4>课程结束时间</h4>
                    <div class="timeLine">
                      <div>2018/1/13(周六)</div>
                      <div>10：30（上午）</div>
                    </div>
                  </div> -->
                  <!-- endTime end-->
                  <!-- <div class="invitation-code">课程申请邀请码：<span>abcd1234</span></div>
                </div>
                <div class="content-middle">
                  <h3>&nbsp;</h3> -->
                  <!-- statTime -->
                  <!-- <div class="courseTimeBox courseTimeBoxOne">
                    <h4>课程报名开始时间</h4>
                    <div class="timeLine">
                      <div>2018/1/13(周六)</div>
                      <div>10：30（上午）</div>
                    </div>
                  </div> -->
                  <!-- statTime end-->
                  <!-- endTime -->
                   <!-- <div class="courseTimeBox courseTimeBoxOne">
                    <h4>课程报名结束时间（需提前课程开始时间24小时）</h4>
                    <div class="timeLine">
                      <div>2018/1/13(周六)</div>
                      <div>10：30（上午）</div>
                    </div>
                  </div> -->
                  <!-- endTime end-->
                <!-- </div>
                <div class="content-right"> -->
                  <!-- <h3>自动运行  30（分钟）</h3> -->
                  <!-- <el-checkbox v-model="checked">自动运行  <i>30（分钟）</i></el-checkbox>
                  <div class="courseTimeBox" v-for="list in runList" :key="list.id">
                    <h4>{{list.roundName}}</h4>
                    <div class="timeLine">
                      <div>{{list.date}}</div>
                      <div>{{list.time}}</div>
                    </div>
                  </div>
                </div>
              </div> -->
              <!-- content end-->
              <!-- <div class="courseBtn">
                <router-link to="home" class="bntc"><img src="../../static/image/icon-eye.png">课程后台</router-link>
                <span class="bntc"><img src="../../static/image/icon-edit.png">编辑详情</span>
              </div>
            </div> -->
            
            <!-- 第二版 end-->

            <!-- 第一版 -->
            <table> 
              <thead>
                <tr>
                  <th>课程名称</th>
                  <th>开始时间</th>
                  <th>结束时间</th>
                  <th>轮数</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td style="width:25%;">
                    <el-input v-model="courseName" :disabled="allInputDisable"></el-input>
                    </td>
                  <td>
                    <el-input v-model="startTime" :disabled="allInputDisable"></el-input>
                    </td>
                  <td>
                    <el-input v-model="endTime" :disabled="allInputDisable"></el-input>
                    </td>
                  <td>
                    <el-input v-model="roundNumber" :disabled="allInputDisable"></el-input>
                  </td>
                  <td style="width:15%;">
                    <span v-if="buttonType=='1'" @click="editor(1)" ><img src="../../static/image/icon-edit.png" alt="">编辑详情</span>
                    <span v-else @click="editor(2)" ><img src="../../static/image/icon-edit.png" alt="">保存</span>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- 第一版 end-->

          </div>
        </div>
        <!-- 学员查看 -->
        <div class="pageDetail">
         <div class="public-header">
            <p class="public-header-ch">学员查看</p>
            <p class="public-header-en">
            <!-- <p class="pageSub pageTip"> -->
              <span class="pageSub">TEAN&nbsp;&nbsp; MEMBER</span>
              <!-- <span class="pageEnglish">TEAN&nbsp;&nbsp; MEMBER</span> -->
              <!-- <span class="pageEdit"><i><img src="../../static/image/icon-edit.png" alt="">编辑学员</i></span> -->
              </p>
            <p class="public-header-line"></p>
          </div>
          <div class="pageMemberAll">
              <div class="pageMember" v-for="(member,index) in memberAll" :key="index">
                <div class="memberTitle">
                  <i>{{member.teamName}}</i>
                  <!-- <span>{{member.background}}</span>
                  <span>{{member.meeting}}</span> -->
                </div>
                <div class="memberTable">
                  <table>
                    <thead>
                      <tr>
                        <th></th>
                        <th>手机号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>职位</th>
                        <th>年龄</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(memberList,index) in member.teamMembersInfoList" :key="index">
                        <td>{{memberList.number}}</td>
                        <td>{{memberList.mobile}}</td>
                        <td>{{memberList.name}}</td>
                        <td>{{memberList.gender}}</td>
                        <td>{{memberList.position}}</td>
                        <td>{{memberList.age}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

          </div>
        </div>
      </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        checked: 'true',
        // 自动运行
        runList:[
          {
            roundName:'第1轮',
            date:'2018/1/10 (周三)',
            time:'10:30 （上午）'
          },
          {
            roundName:'第2轮',
            date:'2018/1/11 (周四)',
            time:'10:30 （下午）'
          },
          {
            roundName:'第3轮',
            date:'2018/1/12 (周五)',
            time:'08:30 （上午）'
          },
          {
            roundName:'第4轮',
            date:'2018/1/14 (周六)',
            time:'10:30 （下午）'
          },
        ],
        courseName:'',
        startTime:'',
        endTime:'',
        roundNumber:'',
        numberofRounds:'',
        
        memberAll:[
          {
            teamName:'',
            // background:'进入MS小组后台',
            // meeting:'进入A学视频会议',
            teamMembersInfoList:[
              {
                number:'',
                mobile:'',
                name:'',
                gender:'',
                position:'',
                age:'',
              },
            ],
          },
        ],
        buttonType:1,//编辑按钮状态
      }
    },
    computed:{
      "allInputDisable":function(){
        if(this.buttonType==1){
          return true
        }
        return false
      }
    },
    methods:{
      // 课程详情
      course:function(){
        let data = {
          id:this.$route.params.id,
        }
        this.$http.course(data,(res)=>{
          this.courseName = res.data.courseName;
          this.startTime = res.data.startTime;
          this.endTime = res.data.endTime;
          this.roundNumber = res.data.roundNumber;
        },(errRes)=>{
          console.log(errRes);
        })
      },
      //学员查看
      members:function(){
        let data = {
          id:this.$route.params.id,
        }
        this.$http.members(data,(res)=>{
          this.memberAll = res.data;
          console.log(res);
        },(errRes)=>{
          console.log(errRes);
        })
      },

      // 编辑详情
      editor:function(type){
        switch(type){
          case 1:
          this.buttonType=2;
          break;
          case 2:
          this.buttonType=1;
          break;
        }
         this.flag=false
        // this.isReadOnly = true;
      },
      input(){
        this.flag=true
      }
    },
    created(){

    },
    mounted(){
      this.course();
      this.members();
      console.log(this.$route.params);
      let data={
        "url":"https://api.zhumu.me/v3/user/create",
        "apiKey":"AA3EB4A8C9FF0B4D20A186F9E5728554",
        "apiSecret":":7A3519D09E30C65EBF0FC4F676535973",
        "email":"12524514@552.com"
      }
      this.$http.createMeeting(data,(res)=>{
         console.log(res.data,'瞩目')
      },(errRes)=>{

      })
    },
  }
</script>
